import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Spin,
  Anchor,
  Row,
  Col,
  Table,
  Timeline,
  Modal,
  Steps,
  Badge,
  Popover,
  Divider,
  Input,
  DatePicker,
} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import downloadFile, { getFileName, urlParse } from '@/utils/utils';

const { Step } = Steps;
const { Description } = DescriptionList;
const { Link } = Anchor;
const FormItem = Form.Item;
const { MonthPicker } = DatePicker;

@connect(({ adjustdetailrec, loading }) => ({
  loading: loading.effects['adjustdetailrec/fetchEmpDetail'],
  modalLoading: loading.effects['adjustdetailrec/fetchPayDetail'],
  adjustdetailrec,
}))
@Form.create()
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sendOrdAddTaskId: null,
      modalVisible: false,
      adjType: null,
      recvOrdAdjTaskId: [],
    };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const query = urlParse(location.search);
    dispatch({
      type: 'adjustdetailrec/updateModelData',
      payload: { isUpdate: query.isUpdate === 'true' },
    });
    // 获取详情信息
    dispatch({
      type: 'adjustdetailrec/fetchEmpDetail',
      payload: query,
    });
    dispatch({
      type: 'adjustdetailrec/controlNavnum',
      payload: {},
    });
    const newrecvOrdAdjTaskId = [];
    newrecvOrdAdjTaskId.push(query.recvOrdAdjTaskId);
    this.setState({
      sendOrdAddTaskId: query.sendOrdAddTaskId,
      adjType: query.adjType,
      recvOrdAdjTaskId: newrecvOrdAdjTaskId,
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const resetInfo = {
      sendOrdAddTaskId: null,
      responseSendOrdDetailDto: null, // 派单信息
      empInfoDto: null, // 员工联系
      pdInfoDtos: null, // 产品服务信息
      protInfoDto: null, // 协议信息
      addEmpDetSerDto: null, // 社保公积金信息
      assDetailDtoList: null, // 增加险种信息
      execStatusDto: null, // 执行状态
      dataDtos: null, // 材料信息
      addEmpDetContRecDto: null, // 联系记录
      handDto: null, // 办理备注
      payDetailList: [], // 明细详情

      updateBaseInfo: null, // 基本信息
      beginYm: null, // 生效日期
      editDesc: null, // 修改说明
      updateAdjInsLocPkgList: null, // 社保组合
      updateInsIde: null, // 缴费人员类别
      updateInsPdDecWage: null, // 社保申报工资
      updateAccuDecWage: null, // 公积金申报工资对象
      updateAccuLocPkg: null, // 公积金组合对象
    };
    dispatch({
      type: 'adjustdetailrec/updateModelData',
      payload: { ...resetInfo },
    });
  }

  // 材料信息（来自员工系统）
  getVal = value => {
    if (value.inpVal) {
      if (value.inpType && value.inpType === 9 && value.inpVal !== '[]') {
        return this.addLink(value.inpVal);
      }
      if (value.inpType && value.inpType === 9 && value.inpVal === '[]') {
        return '--';
      }
      return this.commanName(value);
    }
    return '--';
  };

  commanName = item => (item.inpVal ? item.inpVal : '--');

  addLink = matinfo =>
    matinfo.split(',').map(item => {
      const matinfoItem = item.split('|')[1];
      const matinfoName = getFileName(matinfoItem);
      return (
        <span key={item}>
          <a onClick={() => this.downLoad(item)}>{matinfoName}</a>
        </span>
      );
    });

  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };

  // 获取缴纳明细弹框
  getPayDetail = () => {
    const { dispatch } = this.props;
    const { sendOrdAddTaskId } = this.state;
    dispatch({
      type: 'adjustdetailrec/fetchPayDetail',
      payload: { sendOrdAddTaskId },
    });
    this.handleModalVisible(true);
  };

  // 点击回单
  receipt = () => {
    const { dispatch } = this.props;
    const { recvOrdAdjTaskId } = this.state;
    dispatch({
      type: 'adjustdetailrec/returnReceipt',
      payload: { taskIds: recvOrdAdjTaskId },
      callback: () => {
        router.goBack();
      },
    });
  };

  // 切换模态框：新增、修改
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // 是否修改控制
  updateFlag = (id, isPreser) => {
    const { dispatch, adjustdetailrec, form } = this.props;
    const { recvOrdAdjTaskId } = this.state;
    if (isPreser === 1) {
      form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          const parmer = {
            beginDate: moment(values.baseInfoDto.entryDate).format('YYYY-MM-DD'),
            editDesc: values.baseInfoDto.editDesc,
            recvOrdAdjTaskId: recvOrdAdjTaskId[0],
          };
          dispatch({
            type: 'adjustdetailrec/submissionPreser',
            payload: parmer,
          }).then(res => {
            if (res && res.success) {
              dispatch({
                type: 'adjustdetailrec/updateModelData',
                payload: { [id]: !adjustdetailrec[id] },
              });
            }
          });
        }
      });
    } else {
      dispatch({
        type: 'adjustdetailrec/updateModelData',
        payload: { [id]: !adjustdetailrec[id] },
      });
    }
  };

  // 限制当前日期以前的时间不能选择
  disabledMonthPicker = (current, limitDate) => 
    current && current < moment(limitDate).endOf('day');

  render() {
    // 页面布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
   
    const {
      loading,
      adjustdetailrec: {
        responseSendOrdDetailDto, // 派单信息
        empInfoDto, // 员工联系
        pdInfoDtos, // 产品服务信息
        protInfoDto, // 协议信息
        addEmpDetSerDto, // 社保公积金信息
        assDetailDtoList, // 增加险种信息
        execStatusDto, // 执行状态
        dataDtos, // 材料信息
        addEmpDetContRecDto, // 联系记录
        handDto, // 办理备注
        payDetailList, // 缴费明细
        navNum, // 导航总数
        isUpdate,
        insWageFlag,
        insSetFlag,
        accuWageFlag,
        accuLocFlag,

        updateBaseInfo, // 基本信息
        beginYm, // 生效日期
        editDesc, // 修改说明
        updateAdjInsLocPkgList, // 社保组合
        updateInsIde, // 缴费人员类别
        updateInsPdDecWage, // 社保申报工资
        updateAccuDecWage, // 公积金申报工资对象
        updateAccuLocPkg, // 公积金组合对象
        coltFlag = 1, // 是否需要材料信息
      },
      modalLoading,
      form,
    } = this.props;
    const { getFieldDecorator } = form;
    const { modalVisible, adjType } = this.state;
    const protInfoDtoList = (protInfoDto && [{ ...protInfoDto }]) || [];
    const pdColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始年月',
        dataIndex: 'beginDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`) || '--',
      },
    ];
    const protColumns = [
      {
        title: '协议名称',
        dataIndex: 'suppProtName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单方',
        dataIndex: 'sendSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '服务产品',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '价格',
        dataIndex: 'price',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && parseFloat(val).toFixed(2)) || '--',
      },
    ];
    const insAccuColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '缴费账户',
        dataIndex: 'accoPlcyName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '申报工资',
        dataIndex: 'decWage',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && parseFloat(val).toFixed(2)) || '--',
      },
      {
        title: '政策组合',
        dataIndex: 'grpName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];

    const addassColumns = [
      {
        title: '产品',
        dataIndex: 'assName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '缴纳账户',
        dataIndex: 'accoPlcyName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '申报工资',
        dataIndex: 'decWage',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && parseFloat(val).toFixed(2)) || '--',
      },
      {
        title: '社保组合',
        dataIndex: 'grpName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始年月',
        dataIndex: 'begTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`) || '--',
      },
    ];

    const payDetailColumns = [
      {
        title: '产品名称',
        dataIndex: 'assName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始年月',
        dataIndex: 'beginDate',
        align: 'center',
        sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`) || '--',
      },
      {
        title: '业务结束年月',
        dataIndex: 'endDate',
        align: 'center',
        sorter: (a, b) => new Date(b.endDate) - new Date(a.endDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`) || '--',
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmount',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => (val && parseFloat(val).toFixed(2)) || '--',
      },
      {
        title: '企业比例(%)',
        dataIndex: 'entpProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '企业附加(元)',
        dataIndex: 'entpAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '个人比例(%)',
        dataIndex: 'perProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '个人附加(元)',
        dataIndex: 'perAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: val => val || (val === 0 ? 0 : null),
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];

    const customDot = (dot, { status }) =>
      status === 'process' ? (
        <Popover placement="topLeft" arrowPointAtCenter>
          {dot}
        </Popover>
      ) : (
        dot
      );
    // 判断是否为空对象
    const isEmptyObj = obj => {
      if (obj) {
        return JSON.stringify(obj) === '{}';
      }
      return false;
    };
    // 是否含有材料信息
    const isShowMat = () => {
      if (coltFlag) {
        if (String(coltFlag) === '1') {
          return dataDtos && dataDtos.length ? (
            <DescriptionList style={{ marginBottom: '20px' }}>
              {dataDtos.map(item => (
                <Description
                  key={item.matName}
                  term={item.matName}
                  style={{ wordBreak: 'break-all' }}
                >
                  {this.getVal(item)}
                </Description>
              ))}
            </DescriptionList>
          ) : (
            '暂无数据'
          );
        }
        return (
          <DescriptionList style={{ marginBottom: '20px' }}>
            <Description term="材料是否完整">不需要材料</Description>
          </DescriptionList>
        );
      }
      return true;
    };

    const status1 = (item, leafDet) => {
      if (item.operLeafType === 4) {
        return leafDet.doneFlag === 3 ? 'success' : 'default';
      }
      return leafDet.doneFlag === 1 ? 'success' : 'default';
    };

    return (
      <Form>
        <PageHeaderWrapper>
          <Spin tip="Loading..." spinning={loading}>
            {navNum > '4' ? (
              <Anchor onClick={e => e.preventDefault()} targetOffset={50}>
                <Row type="flex" justify="space-around">
                  {responseSendOrdDetailDto && (
                    <Col>
                      <Link href="#sendinfo" title="派单信息" />
                    </Col>
                  )}
                  {empInfoDto && (
                    <Col>
                      <Link href="#basicinfo" title="员工信息" />
                    </Col>
                  )}
                  {/* {addEmpDetSerDto && ( */}
                  <Col>
                    <Link href="#insaccuinfo" title="社保调整信息" />
                  </Col>
                  {/* // )} */}
                  {/* {addEmpDetSerDto && ( */}
                  <Col>
                    <Link href="#insaccuinfo" title="公积金调整信息" />
                  </Col>
                  {/* )} */}
                  {pdInfoDtos && (
                    <Col>
                      <Link href="#pdinfo" title="产品服务信息" />
                    </Col>
                  )}
                  {protInfoDto && (
                    <Col>
                      <Link href="#protinfo" title="协议信息" />
                    </Col>
                  )}
                  {addEmpDetSerDto && (
                    <Col>
                      <Link href="#insaccuinfo" title="社保公积金信息" />
                    </Col>
                  )}
                  {assDetailDtoList && (
                    <Col>
                      <Link href="#addassinfo" title="增加险种信息" />
                    </Col>
                  )}
                  {execStatusDto && (
                    <Col>
                      <Link href="#runstatusinfo" title="执行状态" />
                    </Col>
                  )}
                  <Col>
                    <Link href="#materialinfo" title="材料信息" />
                  </Col>
                  {addEmpDetContRecDto && (
                    <Col>
                      <Link href="#contrecordinfo" title="联系记录" />
                    </Col>
                  )}
                  {handDto && (
                    <Col>
                      <Link href="#remarkinfo" title="办理备注" />
                    </Col>
                  )}
                </Row>
              </Anchor>
            ) : null}
            {/* 派单信息 */}
            {updateBaseInfo && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>派单信息</span>} id="sendinfo">
                {(!isEmptyObj(updateBaseInfo) && (
                  <DescriptionList>
                    <Description term="签约方">{updateBaseInfo.senderName || '--'}</Description>
                    <Description term="客户名称">{updateBaseInfo.custName || '--'}</Description>
                    <Description term="入职日期">
                      {(updateBaseInfo.entryDate &&
                        moment(updateBaseInfo.entryDate).format('YYYY-MM-DD')) ||
                        '--'}
                    </Description>
                    <Description term="是否入职联系">
                      {updateBaseInfo.conEmpFlagName || '--'}
                    </Description>

                    <Description term="操作人">{updateBaseInfo.sendSuppName || '--'}</Description>
                    {updateBaseInfo.sendDate && (
                      <Description term="发单时间">
                        {(updateBaseInfo.sendDate &&
                          moment(updateBaseInfo.sendDate).format('YYYY-MM-DD HH:mm')) ||
                          '--'}
                      </Description>
                    )}
                  </DescriptionList>
                )) ||
                  '暂无数据'}
              </Card>
            )}

            {/* 员工信息 */}
            {updateBaseInfo && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>员工信息</span>} id="basicinfo">
                {(!isEmptyObj(updateBaseInfo) && (
                  <DescriptionList>
                    <Description term="姓名">{updateBaseInfo.empName || '--'}</Description>
                    <Description term="证件类型">{updateBaseInfo.idTypeName || '--'}</Description>
                    <Description term="证件号">{updateBaseInfo.idCode || '--'}</Description>
                    <Description term="国籍">{updateBaseInfo.nationName || '--'}</Description>
                    <Description term="出生日期">
                      {(updateBaseInfo.birthDate &&
                        moment(updateBaseInfo.birthDate).format('YYYY-MM-DD')) ||
                        '--'}
                    </Description>
                    <Description term="性别">{updateBaseInfo.genderName || '--'}</Description>
                    <Description term="电话">{updateBaseInfo.mobile || '--'}</Description>
                    <Description term="员工邮箱">{updateBaseInfo.email || '--'}</Description>
                  </DescriptionList>
                )) ||
                  '暂无数据'}
              </Card>
            )}

            {/* 社保调整信息 */}
            {/* {addEmpDetSerDto && ( */}
            <div>
              {String(adjType) === '1' ? (
                <Card
                  // title={<span style={{ fontWeight: 'bolder' }}>社保调整信息</span>}
                  title={
                    // {/*    <p>
                    //     <span style={{ fontWeight: 'bolder' }}>公积金调整信息</span>
                    //    <span style={{ position: 'absolute', top: '0', right: '0' }}>修改</span>
                    //   </p>*/}
                    <div style={{ position: 'relative' }}>
                      <span style={{ fontWeight: 'bolder' }}>社保调整信息</span>
                      <span style={{ position: 'absolute', top: '0', right: '0' }}>
                        {/* {isUpdate && ( */}
                        {accuWageFlag ? (
                          <a
                            style={{ marginLeft: 20 }}
                            onClick={() => this.updateFlag('accuWageFlag', 1)}
                          >
                            保存
                          </a>
                        ) : (
                          <a
                            style={{ marginLeft: 20 }}
                            onClick={() => this.updateFlag('accuWageFlag')}
                          >
                            修改
                          </a>
                        )}

                        {/* )} */}
                      </span>
                    </div>
                  }
                  id="insaccuinfo"
                >
                  <Row>
                    {updateInsIde ? (
                      <div style={{ width: '100%' }}>
                        <h4>缴费人员类别</h4>
                        <Col {...colProps}>
                          <FormItem
                            label="缴费人员类别"
                            {...formItemLayout}
                            style={{ marginBottom: 0 }}
                          >
                            <span>{updateInsIde.oldInsIdeName || '--'}</span>
                          </FormItem>
                        </Col>
                        {/* <Col {...colProps}>
                          <FormItem label="生效日期" {...formItemLayout}>
                            {getFieldDecorator('baseInfoDto.entryDate1', {
                              rules: [{ required: true, message: '请选择' }],
                            })(
                              insIdeUpdateFlag ? (
                                <MonthPicker
                                  allowClear={false}
                                  placeholder="请选择"
                                  style={{ width: '100%' }}
                                />
                              ) : (
                                <span>
                                  {(beginYm && moment(beginYm).format('YYYY-MM-DD')) || '--'}
                                </span>
                              )
                            )}
                          </FormItem>
                        </Col> */}
                        <Divider dashed />
                      </div>
                    ) : null}
                  </Row>
                  {updateInsPdDecWage ? (
                    <Row>
                      <h4>社保申报工资</h4>
                      {insSetFlag === 1 ? (
                        <div>
                          <Col {...colProps}>
                            <FormItem
                              label="社保申报工资1111111"
                              {...formItemLayout}
                              style={{ marginBottom: 0 }}
                            >
                              {/* <span>2000</span> */}
                              <span>{updateInsPdDecWage.InsDecWage}</span>
                            </FormItem>
                          </Col>
                          <Col {...colProps}>
                            <FormItem
                              label="生效日期"
                              {...formItemLayout}
                              style={{ marginBottom: 0 }}
                            >
                              {getFieldDecorator('baseInfoDto.entryDate2', {
                                rules: [{ required: accuLocFlag, message: '请选择' }],
                              })(
                                insWageFlag ? (
                                  <MonthPicker
                                    allowClear={false}
                                    placeholder="请选择"
                                    style={{ width: '100%' }}
                                    disabledDate={current => this.disabledMonthPicker(current, beginYm)}
                                  />
                                ) : (
                                  <span>
                                    {/* 2019-06
                                  <span style={{ marginLeft: 10, fontSize: '14px', color: '#999' }}>
                                    (原 2018-08)
                                  </span> */}
                                    {(beginYm && moment(beginYm).format('YYYY-MM-DD')) || '--'}
                                  </span>
                                )
                              )}
                            </FormItem>
                          </Col>
                        </div>
                      ) : (
                        (updateInsPdDecWage &&
                          updateInsPdDecWage.updateInsDecWageList.map(item => (
                            <Row key={item.ass}>
                              <Col {...colProps}>
                                <FormItem
                                  label={<span>{item.assName}</span>}
                                  {...formItemLayout}
                                  style={{ marginBottom: 0 }}
                                >
                                  <span>{item.oldInsDecWage && item.oldInsDecWage.toFixed(2)}</span>
                                </FormItem>
                              </Col>
                            </Row>
                          ))) ||
                        null
                      )}
                      <Divider dashed />
                    </Row>
                  ) : null}

                  {updateAdjInsLocPkgList ? (
                    <Row>
                      <h4>社保组合</h4>
                      <div>
                        {updateAdjInsLocPkgList.map(itemins => (
                          <Row style={{ margin: '0 0 20px 0' }}>
                            <Col {...colProps}>
                              <FormItem
                                label="缴费方式"
                                {...formItemLayout}
                                style={{ marginBottom: 0 }}
                              >
                                <span>{itemins.payWayName || '--'}</span>
                              </FormItem>
                            </Col>
                            <Col {...colProps}>
                              <FormItem
                                label="缴费账户"
                                {...formItemLayout}
                                style={{ marginBottom: 0 }}
                              >
                                <span>{itemins.accoName || '--'}</span>
                              </FormItem>
                            </Col>
                            <Col {...colProps}>
                              <FormItem
                                label="社保组合"
                                {...formItemLayout}
                                style={{ marginBottom: 0 }}
                              >
                                <span>{itemins.insGrpName || '--'}</span>
                              </FormItem>
                            </Col>
                          </Row>
                        ))}
                      </div>
                      <Divider dashed />
                    </Row>
                  ) : null}
                  <Row style={{ margin: '0 0 0 -0px' }}>
                    <Col {...colProps}>
                      <FormItem label="生效日期" {...formItemLayout} style={{ marginBottom: 0 }}>
                        {getFieldDecorator('baseInfoDto.entryDate', {
                          rules: [{ required: true, message: '请选择' }],
                          initialValue: (beginYm && moment(beginYm)) || undefined,
                        })(
                          accuWageFlag ? (
                            <MonthPicker
                              allowClear={false}
                              format="YYYY-MM-01"
                              placeholder="请选择"
                              style={{ width: '100%' }}
                              disabledDate={current => this.disabledMonthPicker(current, beginYm)}
                            />
                          ) : (
                            <span>{(beginYm && moment(beginYm).format('YYYY-MM-DD')) || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>

                    <Col {...colProps}>
                      <FormItem label="修改说明" {...formItemLayout} style={{ marginBottom: 0 }}>
                        {getFieldDecorator('baseInfoDto.editDesc', {
                          rules: [{ required: accuWageFlag, message: '请输入' }],
                          initialValue: editDesc || undefined,
                        })(
                          accuWageFlag ? (
                            <Input placeholder="请输入" style={{ width: '100%' }} />
                          ) : (
                            <span>{editDesc || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                </Card>
              ) : (
                <Card
                  title={
                    // {/*    <p>
                    //     <span style={{ fontWeight: 'bolder' }}>公积金调整信息</span>
                    //    <span style={{ position: 'absolute', top: '0', right: '0' }}>修改</span>
                    //   </p>*/}
                    <div style={{ position: 'relative' }}>
                      <span style={{ fontWeight: 'bolder' }}>公积金调整信息</span>
                      <span style={{ position: 'absolute', top: '0', right: '0' }}>
                        {/* {isUpdate && (
                          <a
                            style={{ marginLeft: 20 }}
                            onClick={() => this.updateFlag('accuWageFlag')}
                          >
                            {accuWageFlag ? '保存' : '修改'}
                          </a>
                        )} */}
                        {accuWageFlag ? (
                          <a
                            style={{ marginLeft: 20 }}
                            onClick={() => this.updateFlag('accuWageFlag', 1)}
                          >
                            保存
                          </a>
                        ) : (
                          <a
                            style={{ marginLeft: 20 }}
                            onClick={() => this.updateFlag('accuWageFlag')}
                          >
                            修改
                          </a>
                        )}
                      </span>
                    </div>
                  }
                  id="insaccuinfo"
                >
                  {/* 公积金调整信息 */}
                  {/* {addEmpDetSerDto && ( */}
                  {updateAccuDecWage ? (
                    <div>
                      <Row>
                        <h4>公积金申报工资</h4>
                        <Row>
                          <Col {...colProps}>
                            <FormItem
                              label="公积金申报工资"
                              {...formItemLayout}
                              style={{ marginBottom: 0 }}
                            >
                              <span>{updateAccuDecWage.oldAccuDecWage || '--'}</span>
                            </FormItem>
                          </Col>
                        </Row>
                      </Row>
                      <Divider dashed />
                    </div>
                  ) : null}
                  {updateAccuLocPkg ? (
                    <Row>
                      <h4>公积金组合</h4>
                      <Col {...colProps}>
                        <FormItem label="缴费方式" {...formItemLayout} style={{ marginBottom: 0 }}>
                          <span>{updateAccuLocPkg.payWayName || '--'}</span>
                        </FormItem>
                      </Col>
                      <Col {...colProps}>
                        <FormItem label="缴费账户" {...formItemLayout} style={{ marginBottom: 0 }}>
                          <span>{updateAccuLocPkg.accuAccoName || '--'}</span>
                        </FormItem>
                      </Col>
                      <Col {...colProps}>
                        <FormItem
                          label="公积金组合"
                          {...formItemLayout}
                          style={{ marginBottom: 0 }}
                        >
                          <span>{updateAccuLocPkg.accuGrpName || '--'}</span>
                        </FormItem>
                      </Col>

                      <Divider dashed />
                    </Row>
                  ) : null}
                  <Row style={{ margin: '0 0 0 -0px' }}>
                    <Col {...colProps}>
                      <FormItem label="生效日期" {...formItemLayout} style={{ marginBottom: 0 }}>
                        {getFieldDecorator('baseInfoDto.entryDate', {
                          rules: [{ required: true, message: '请选择' }],
                          initialValue: (beginYm && moment(beginYm)) || undefined,
                        })(
                          accuWageFlag ? (
                            <MonthPicker
                              allowClear={false}
                              placeholder="请选择"
                              style={{ width: '100%' }}
                              disabledDate={current => this.disabledMonthPicker(current, beginYm)}
                            />
                          ) : (
                            <span>{(beginYm && moment(beginYm).format('YYYY-MM-DD')) || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>

                    <Col {...colProps}>
                      <FormItem label="修改说明" {...formItemLayout} style={{ marginBottom: 0 }}>
                        {getFieldDecorator('baseInfoDto.editDesc', {
                          rules: [{ required: accuWageFlag, message: '请输入' }],
                          initialValue: editDesc || undefined,
                        })(
                          accuWageFlag ? (
                            <Input placeholder="请输入" style={{ width: '100%' }} />
                          ) : (
                            <span>{editDesc || '--'}</span>
                          )
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                </Card>
              )}
            </div>

            {/* 产品服务信息 */}
            {pdInfoDtos && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>产品服务信息</span>} id="pdinfo">
                {(pdInfoDtos.length && (
                  <Table
                    dataSource={pdInfoDtos || []}
                    columns={pdColumns}
                    rowKey={(_, index) => index}
                    pagination={false}
                    style={{ maxWidth: 800 }}
                  />
                )) ||
                  '暂无数据'}
              </Card>
            )}

            {/* 协议信息 */}
            {protInfoDto && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>协议信息</span>} id="protinfo">
                {(protInfoDtoList.length && (
                  <Table
                    dataSource={protInfoDtoList || []}
                    columns={protColumns}
                    rowKey={(_, index) => index}
                    pagination={false}
                  />
                )) ||
                  '暂无数据'}
              </Card>
            )}

            {/* 社保公积金信息 */}
            {addEmpDetSerDto && (
              <Card
                title={
                  <div style={{ position: 'relative' }}>
                    <span style={{ fontWeight: 900 }}>社保公积金信息</span>
                    <a
                      onClick={this.getPayDetail}
                      style={{ position: 'absolute', top: '0', right: '0', fontSize: '14px' }}
                    >
                      缴纳明细
                    </a>
                  </div>
                }
                id="insaccuinfo"
              >
                {(!isEmptyObj(addEmpDetSerDto) && (
                  // 暂不考虑五险合不合一
                  // (addEmpDetSerDto.insSetFlag === 1 ? (
                  //   <div>
                  //     <DescriptionList>
                  //       <Description term="社保申报工资">{empInfoDto.empName || '--'}</Description>
                  //       <Description term="单立户账户">{empInfoDto.idTypeName || '--'}</Description>
                  //       <Description term="社保账户">{empInfoDto.idCode || '--'}</Description>
                  //       <Description term="社保组合">{empInfoDto.nationName || '--'}</Description>
                  //       <Description term="缴费人员类别">
                  //         {empInfoDto.nationName || '--'}
                  //       </Description>
                  //       <Divider dashed />
                  //       <Description term="公积金申报工资">
                  //         {empInfoDto.genderName || '--'}
                  //       </Description>
                  //       <Description term="公积金缴费方式">{empInfoDto.mobile || '--'}</Description>
                  //       <Description term="公积金账户">{empInfoDto.email || '--'}</Description>
                  //       <Description term="公积金组合">{empInfoDto.email || '--'}</Description>
                  //     </DescriptionList>
                  //   </div>
                  // ) : (
                  <Table
                    dataSource={addEmpDetSerDto.detailSerDtos || []}
                    columns={insAccuColumns}
                    rowKey={(_, index) => index}
                    pagination={false}
                  />
                )) ||
                  // ))
                  '暂无数据'}
              </Card>
            )}

            {/* 新增险种信息 */}
            {assDetailDtoList && (
              <Card
                title={<span style={{ fontWeight: 'bolder' }}>增加险种信息</span>}
                id="addassinfo"
              >
                {(assDetailDtoList.length && (
                  <Table
                    dataSource={assDetailDtoList || []}
                    columns={addassColumns}
                    rowKey={(_, index) => index}
                    pagination={false}
                    style={{ width: 800 }}
                  />
                )) ||
                  '暂无数据'}
              </Card>
            )}

            {/* 执行状态 */}
            {execStatusDto && (
              <Card
                title={<span style={{ fontWeight: 'bolder' }}>执行状态</span>}
                id="runstatusinfo"
              >
                {(execStatusDto.leafList && execStatusDto.leafList.length && (
                  <Steps
                    progressDot={customDot}
                    style={{ width: '60%', margin: '0 auto', marginTop: 20 }}
                  >
                    {execStatusDto &&
                      execStatusDto.leafList.map(item => (
                        <Step
                          key={item.operLeafTypeName}
                          title={item.operLeafTypeName}
                          description={
                            !item.leafDetList.length ? (
                              `暂无${item.operLeafType === '3' ? '办理' : '申报'}内容`
                            ) : (
                              <div style={{ width: 400, fontSize: 12, textAlign: 'left' }}>
                                {item.leafDetList.map(leafDet => (
                                  <div key={leafDet.leafDetId}>
                                    <Badge
                                      status={status1(item, leafDet)}
                                      text={
                                        <span style={{ lineHeight: '30px' }}>
                                          {leafDet.leafDetTypeName}&nbsp;
                                          <span style={{ color: '#999' }}>
                                            {leafDet.cityName ? `(${leafDet.cityName})` : ''}
                                          </span>
                                          &nbsp;:{leafDet.doneFlagName || '--'}
                                          <span
                                            style={{
                                              fontSize: '12px',
                                              color: '#999',
                                              marginLeft: 15,
                                            }}
                                          >
                                            {leafDet.operTime &&
                                              moment(leafDet.operTime).format('YYYY-MM-DD')}
                                          </span>
                                        </span>
                                      }
                                    />
                                    <br />
                                  </div>
                                ))}
                              </div>
                            )
                          }
                          status={item.doneFlag === 1 ? 'finish' : 'wait'}
                        />
                      ))}
                  </Steps>
                )) ||
                  '暂无数据'}
              </Card>
            )}

            {/* 材料信息 */}
            <Card title={<span style={{ fontWeight: 'bolder' }}>材料信息</span>} id="materialinfo">
              {isShowMat()}
            </Card>

            {/* 联系记录 */}
            {addEmpDetContRecDto && (
              <Card
                title={<span style={{ fontWeight: 'bolder' }}>联系记录</span>}
                id="contrecordinfo"
              >
                {(addEmpDetContRecDto.length &&
                  addEmpDetContRecDto.map((item, index) => (
                    <div>
                      {index > 0 && <Divider dashed />}
                      <DescriptionList>
                        <Description term="联系方式">{item.contactInfo || '--'}</Description>
                        {item.contactInfo === '短信' || item.contactInfo === '电话' ? (
                          <Description term="联系电话">{item.contactMobile}</Description>
                        ) : (
                          <Description term="邮件">{item.email || '--'}</Description>
                        )}
                        <Description term="联系人">{item.contactPer || '--'}</Description>
                        <Description term="联系时间">{item.contactTime || '--'}</Description>
                        <Description term="联系内容">
                          <span dangerouslySetInnerHTML={{ __html: item.remark || '--' }} />
                        </Description>
                      </DescriptionList>
                    </div>
                  ))) ||
                  '暂无数据'}
              </Card>
            )}

            {/* 办理备注 */}
            {handDto && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>办理备注</span>} id="remarkinfo">
                {(handDto.length && (
                  <Timeline>
                    {handDto.map(item => (
                      <Timeline.Item>
                        <p style={{ float: 'left', margin: '0 15px 0 20px' }}>
                          {item.operTime && moment(item.operTime).format('YYYY-MM-DD HH:mm')}
                        </p>
                        <p style={{ float: 'left', margin: '0 20px 0 15px' }}> {item.operName} </p>
                        <p> {item.content} </p>
                      </Timeline.Item>
                    ))}
                  </Timeline>
                )) ||
                  '暂无数据'}
              </Card>
            )}
            <Modal
              width={1200}
              visible={modalVisible}
              onCancel={() => this.handleModalVisible(false)}
              title="社保公积金明细"
              footer={[
                <Button
                  key="submit"
                  type="primary"
                  loading={loading}
                  onClick={() => this.handleModalVisible(false)}
                >
                  关闭
                </Button>,
              ]}
            >
              <Table
                dataSource={payDetailList}
                columns={payDetailColumns}
                rowKey={(_, index) => index}
                loading={modalLoading}
                pagination={false}
              />
            </Modal>
            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={() => router.goBack()}>返回</Button>
              {isUpdate ? null : (
                <Button type="primary" onClick={() => this.receipt()} disabled={accuWageFlag}>
                  回单
                </Button>
              )}
            </FooterToolbar>
          </Spin>
        </PageHeaderWrapper>
      </Form>
    );
  }
}

const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
